<template>
  <div>
    <!-- 使用Header组件 -->
    <HeaderComponent 
      :isLoggedIn="userStore.isLoggedIn"
      :userInfo="userStore.userInfo"
      :showUserPanel="showUserPanel"
      @toggle-user-panel="toggleUserPanel"
      @logout="handleLogout"
    />
    
    <div class="growth-benefits-page">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1 class="page-title">成长福利</h1>
        <p class="page-subtitle">每日签到，积累经验，解锁更多福利</p>
      </div>

      <!-- 签到区域 -->
      <div class="checkin-section">
        <div class="checkin-card">
          <div class="checkin-header">
            <h2>每日签到</h2>
            <div class="checkin-streak">
              <span class="streak-number">{{ consecutiveDays }}</span>
              <span class="streak-text">连续签到天数</span>
            </div>
          </div>
          
          <div class="checkin-calendar">
            <div class="calendar-header">
              <span>{{ currentMonth }}</span>
            </div>
            <div class="calendar-grid">
              <div 
                v-for="day in calendarDays" 
                :key="day.date"
                class="calendar-day"
                :class="{
                  'checked': day.checked,
                  'today': day.isToday,
                  'future': day.isFuture
                }"
              >
                <span class="day-number">{{ day.day }}</span>
                <span v-if="day.checked" class="check-mark">✓</span>
                <span v-if="day.reward" class="reward-points">+{{ day.reward }}</span>
              </div>
            </div>
          </div>
          
          <div class="checkin-action">
            <button 
              class="checkin-btn"
              :class="{ 'checked': todayChecked, 'disabled': todayChecked }"
              @click="checkIn"
              :disabled="todayChecked"
            >
              {{ todayChecked ? '今日已签到' : '立即签到' }}
            </button>
          </div>
        </div>
      </div>

      <!-- 成长等级 -->
      <div class="level-section">
        <div class="level-card">
          <div class="level-header">
            <h2>成长等级</h2>
            <div class="current-level">
              <span class="level-badge">JV.{{ currentLevel }}</span>
            </div>
          </div>
          
          <div class="level-progress">
            <div class="progress-info">
              <span>当前经验: {{ currentExp }} / {{ nextLevelExp }}</span>
              <span>距离下一级还需: {{ nextLevelExp - currentExp }} 经验</span>
            </div>
            <div class="progress-bar">
              <div 
                class="progress-fill"
                :style="{ width: (currentExp / nextLevelExp * 100) + '%' }"
              ></div>
            </div>
          </div>
          
          <div class="level-benefits">
            <h3>等级特权</h3>
            <div class="benefits-grid">
              <div class="benefit-item" v-for="benefit in levelBenefits" :key="benefit.id">
                <div class="benefit-icon">{{ benefit.icon }}</div>
                <div class="benefit-text">{{ benefit.text }}</div>
                <div class="benefit-status" :class="benefit.unlocked ? 'unlocked' : 'locked'">
                  {{ benefit.unlocked ? '已解锁' : `JV.${benefit.requiredLevel}解锁` }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 福利中心 -->
      <div class="rewards-section">
        <div class="rewards-card">
          <div class="rewards-header">
            <h2>福利中心</h2>
            <div class="points-balance">
              <span class="points-icon">💎</span>
              <span class="points-text">积分余额: {{ userPoints }}</span>
            </div>
          </div>
          
          <div class="rewards-grid">
            <div 
              v-for="reward in rewards" 
              :key="reward.id"
              class="reward-item"
              :class="{ 'insufficient': userPoints < reward.cost }"
            >
              <div class="reward-image">
                <span class="reward-emoji">{{ reward.emoji }}</span>
              </div>
              <div class="reward-info">
                <h4 class="reward-title">{{ reward.title }}</h4>
                <p class="reward-desc">{{ reward.description }}</p>
                <div class="reward-cost">
                  <span class="cost-points">{{ reward.cost }}</span>
                  <span class="cost-text">积分</span>
                </div>
              </div>
              <button 
                class="exchange-btn"
                :disabled="userPoints < reward.cost"
                @click="exchangeReward(reward)"
              >
                {{ userPoints >= reward.cost ? '兑换' : '积分不足' }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderComponent from '@/components/HeaderComponent.vue'
import { useUserStore } from '@/stores/user.js'

export default {
  name: 'GrowthBenefitsView',
  components: {
    HeaderComponent
  },
  setup() {
    const userStore = useUserStore();
    return {
      userStore
    }
  },
  data() {
    return {
      showUserPanel: false,
      consecutiveDays: 7,
      todayChecked: false,
      currentLevel: 1,
      currentExp: 75,
      nextLevelExp: 150,
      userPoints: 1200,
      currentMonth: '2025年 9月',
      calendarDays: [
        { day: 1, date: '2025-09-01', checked: true, reward: 10, isToday: false, isFuture: false },
        { day: 2, date: '2025-09-02', checked: true, reward: 10, isToday: false, isFuture: false },
        { day: 3, date: '2025-09-03', checked: true, reward: 10, isToday: false, isFuture: false },
        { day: 4, date: '2025-09-04', checked: true, reward: 10, isToday: false, isFuture: false },
        { day: 5, date: '2025-09-05', checked: true, reward: 10, isToday: false, isFuture: false },
        { day: 6, date: '2025-09-06', checked: true, reward: 10, isToday: false, isFuture: false },
        { day: 7, date: '2025-09-07', checked: true, reward: 10, isToday: false, isFuture: false },
        { day: 8, date: '2025-09-08', checked: false, reward: 10, isToday: false, isFuture: false },
        { day: 9, date: '2025-09-09', checked: false, reward: 10, isToday: false, isFuture: false },
        { day: 10, date: '2025-09-10', checked: false, reward: 10, isToday: false, isFuture: false },
        { day: 11, date: '2025-09-11', checked: false, reward: 10, isToday: false, isFuture: false },
        { day: 12, date: '2025-09-12', checked: false, reward: 10, isToday: false, isFuture: false },
        { day: 13, date: '2025-09-13', checked: false, reward: 10, isToday: false, isFuture: false },
        { day: 14, date: '2025-09-14', checked: false, reward: 10, isToday: false, isFuture: false },
        { day: 15, date: '2025-09-15', checked: false, reward: 10, isToday: false, isFuture: false },
        { day: 16, date: '2025-09-16', checked: false, reward: 100, isToday: true, isFuture: false }
      ],
      levelBenefits: [
        { id: 1, icon: '🎯', text: '每日签到奖励翻倍', requiredLevel: 2, unlocked: false },
        { id: 2, icon: '💬', text: '专属评论标识', requiredLevel: 3, unlocked: false },
        { id: 3, icon: '🏆', text: '排行榜优先展示', requiredLevel: 5, unlocked: false },
        { id: 4, icon: '🎁', text: '专属礼品兑换', requiredLevel: 10, unlocked: false }
      ],
      rewards: [
        {
          id: 1,
          title: '掘金T恤',
          description: '限量版掘金主题T恤，彰显技术范儿',
          cost: 2000,
          emoji: '👕'
        },
        {
          id: 2,
          title: '技术书籍',
          description: '精选前端/后端技术书籍，提升技能',
          cost: 1500,
          emoji: '📚'
        },
        {
          id: 3,
          title: '会员月卡',
          description: '掘金会员30天，享受更多特权',
          cost: 800,
          emoji: '💳'
        },
        {
          id: 4,
          title: '咖啡券',
          description: '星巴克咖啡券，为编程加油',
          cost: 500,
          emoji: '☕'
        }
      ]
    }
  },
  methods: {
    toggleUserPanel() {
      this.showUserPanel = !this.showUserPanel;
    },
    handleLogout() {
      this.userStore.logout();
      this.$router.push('/');
    },
    checkIn() {
      if (!this.todayChecked) {
        this.todayChecked = true;
        this.consecutiveDays++;
        this.userPoints += 100;
        this.currentExp += 10;
        
        // 更新今天的签到状态
        const today = this.calendarDays.find(day => day.isToday);
        if (today) {
          today.checked = true;
        }
        
        this.$nextTick(() => {
          alert('签到成功！获得 100 积分和 10 经验值');
        });
      }
    },
    exchangeReward(reward) {
      if (this.userPoints >= reward.cost) {
        this.userPoints -= reward.cost;
        alert(`成功兑换 ${reward.title}！`);
      }
    }
  }
}
</script>

<style scoped>
.growth-benefits-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f4f5f5;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-title {
  font-size: 32px;
  font-weight: bold;
  color: #1d2129;
  margin: 0 0 8px 0;
}

.page-subtitle {
  font-size: 16px;
  color: #86909c;
  margin: 0;
}

/* 签到区域 */
.checkin-section {
  margin-bottom: 30px;
}

.checkin-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.checkin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.checkin-header h2 {
  font-size: 24px;
  color: #1d2129;
  margin: 0;
}

.checkin-streak {
  text-align: center;
}

.streak-number {
  display: block;
  font-size: 32px;
  font-weight: bold;
  color: #1e80ff;
}

.streak-text {
  font-size: 14px;
  color: #86909c;
}

.checkin-calendar {
  margin-bottom: 20px;
}

.calendar-header {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #1d2129;
  margin-bottom: 16px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  max-width: 400px;
  margin: 0 auto;
}

.calendar-day {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid #e4e6eb;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.calendar-day.checked {
  background: linear-gradient(135deg, #1e80ff, #4dabf7);
  border-color: #1e80ff;
  color: white;
}

.calendar-day.today {
  border-color: #ff6b6b;
  background: #fff5f5;
}

.calendar-day.today.checked {
  background: linear-gradient(135deg, #ff6b6b, #ff8787);
  border-color: #ff6b6b;
}

.calendar-day.future {
  opacity: 0.5;
  cursor: not-allowed;
}

.day-number {
  font-size: 14px;
  font-weight: bold;
}

.check-mark {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 10px;
}

.reward-points {
  position: absolute;
  bottom: 2px;
  font-size: 10px;
  color: #ffd700;
}

.checkin-action {
  text-align: center;
}

.checkin-btn {
  background: linear-gradient(135deg, #1e80ff, #4dabf7);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.checkin-btn:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 128, 255, 0.3);
}

.checkin-btn.checked {
  background: #86909c;
  cursor: not-allowed;
}

.checkin-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 等级区域 */
.level-section {
  margin-bottom: 30px;
}

.level-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.level-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.level-header h2 {
  font-size: 24px;
  color: #1d2129;
  margin: 0;
}

.level-badge {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #1d2129;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 16px;
}

.level-progress {
  margin-bottom: 24px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: #86909c;
}

.progress-bar {
  height: 8px;
  background: #e4e6eb;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #1e80ff, #4dabf7);
  transition: width 0.3s ease;
}

.level-benefits h3 {
  font-size: 18px;
  color: #1d2129;
  margin: 0 0 16px 0;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.benefit-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #e4e6eb;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.benefit-item:hover {
  border-color: #1e80ff;
  background: #f8faff;
}

.benefit-icon {
  font-size: 24px;
  margin-right: 12px;
}

.benefit-text {
  flex: 1;
  font-size: 14px;
  color: #1d2129;
}

.benefit-status {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
}

.benefit-status.unlocked {
  background: #e6f7ff;
  color: #1e80ff;
}

.benefit-status.locked {
  background: #f5f5f5;
  color: #86909c;
}

/* 福利区域 */
.rewards-section {
  margin-bottom: 30px;
}

.rewards-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rewards-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.rewards-header h2 {
  font-size: 24px;
  color: #1d2129;
  margin: 0;
}

.points-balance {
  display: flex;
  align-items: center;
  gap: 8px;
}

.points-icon {
  font-size: 20px;
}

.points-text {
  font-size: 16px;
  font-weight: bold;
  color: #1e80ff;
}

.rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.reward-item {
  border: 1px solid #e4e6eb;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.reward-item:hover {
  border-color: #1e80ff;
  box-shadow: 0 4px 12px rgba(30, 128, 255, 0.1);
}

.reward-item.insufficient {
  opacity: 0.6;
}

.reward-image {
  text-align: center;
  margin-bottom: 16px;
}

.reward-emoji {
  font-size: 48px;
}

.reward-info {
  margin-bottom: 16px;
}

.reward-title {
  font-size: 18px;
  font-weight: bold;
  color: #1d2129;
  margin: 0 0 8px 0;
}

.reward-desc {
  font-size: 14px;
  color: #86909c;
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.reward-cost {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cost-points {
  font-size: 20px;
  font-weight: bold;
  color: #1e80ff;
}

.cost-text {
  font-size: 14px;
  color: #86909c;
}

.exchange-btn {
  width: 100%;
  background: linear-gradient(135deg, #1e80ff, #4dabf7);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.exchange-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 128, 255, 0.3);
}

.exchange-btn:disabled {
  background: #86909c;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
</style>